<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>土豆首页</title>
		 
		<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
			<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
			<link href="css/index.css" rel="stylesheet" type="text/css"/>
	 
	 <style>
		 .user-logout{
			 color: #222222;
		 }
		 .user-logout:hover{
			 color: orange;
		 }
	 </style>

	</head>
	<body>
		 
		 <div id="app">
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="index.html">首页</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookstore.html">书库</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookshelf.html">书架</a>
							 
						</div>
						<div class="right-shouye">
							<a href="ranking.html">排行榜</a>
							 
						</div>
						 <div class="right-search">
						 	 <input placeholder="请输入书名或作者名" v-model="selectneirou">
						 	 <img @click="select()" style="cursor: pointer;width: 15px;height: 18px;" src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/%E6%90%9C%E7%B4%A21.png" />
							 
						 </div>
						 <div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						 <div class="right-user">
							 <a  v-if="!isLogged" href="login.html"> <div class="user-login">登录</div></a>
							 <a v-if="!isLogged" href="login.html"><div class="user-reg">注册</div></a>
							 <div v-if="isLogged" style="display: flex; align-items: center;cursor: pointer;"  >
								 <el-avatar   icon="el-icon-user-solid" :src="this.user.avatar"> </el-avatar>
								 <span @click="geren()"  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.user.username}} </span>
							 </div>
							 <div v-if="isLogged" style="display: flex; align-items: center;">
								 <span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							 </div>

						 </div>

						 
						 
						 
						 
						 
					</div>
				</div>
			</div>
			<div class="td-index">
				<div class="lunbotu">
					 <template>
					   <el-carousel height="400px" direction="vertical" :autoplay="true" :interval="2000">
					     <el-carousel-item v-for="item in items" :key="item.id">
							 <img :src="item.imageUrl" class="carousel-image" alt="">
					       <h3 class="medium">{{  item.title }}</h3>
					     </el-carousel-item>
					   </el-carousel>
					 </template>
				</div>
				
				<div class="td-index-zc">
					<h2 class="muye-home-block-title muye-home-top-rank-title">土豆推荐榜</h2>
					<p class="muye-home-top-rank-desc">根据作品好评、人气、互动等综合得分排行</p>
					<el-row>
					  <el-col :span="4" v-for=" n in novel"  style="margin-left: 5%;margin-top: 3%;width: 200px;height: 300px;"  >
					    <el-card :body-style="{ padding: '0px' }">
					      <img :src="n.coverImage" class="image" style="width: 200px;height: 200px ;margin: auto;">
					      <div style="padding: 14px;">
					        
					        <div class="bottom clearfix"  >
								<div style="width: 100%;height: 20px;">
									<span class="author_name">作者：{{n.authorName}}</span>
									 <!-- 小说分类 -->
									 <span class="category">{{n.categoryName}}</span>
								</div>
							 
					             <el-button  @click="Jump(n.novelId)" type="text" class="button" style="width: 180px;height: 30px;margin: auto;font-size: 20px;color: #000000;  font-weight: bold;    "> {{n.title}} </el-button>
					        </div>
					      </div>
					    </el-card>
					  </el-col>
					</el-row>
					
				</div>
				
				 
			</div>
			<div class="td-footer">
				  <p>Company Name</p>
				 <p>Address: 123 Street, City, Country</p>
				 <p>Email: info@example.com</p>
			</div>
		</div>
		
	</body>
	
	<script>
	 
	 
	
	var v = new Vue({
		el : "#app",
		data() {
			  
		 
			 return {
				  items: [
					{ id: 1, title: 'Slide 1', imageUrl: 'https://p3-novel.byteimg.com/origin/novel-static/ae0069b001ddee9d6b113a9b4750c7b9' },
					{ id: 2, title: 'Slide 2', imageUrl: 'https://p6-novel.byteimg.com/origin/novel-static/1ae29ac0a71a752bab51d090b942c3c4' },
					{ id: 3, title: 'Slide 3', imageUrl: 'https://p3-novel.byteimg.com/origin/novel-static/28928ff95ec47fd72261ff0c4add7236' },
					{ id: 4, title: 'Slide 3', imageUrl: 'https://p6-novel.byteimg.com/img/novel-static/b79158334026d5a71af29000c21ed3c4~0x0.jpeg' },
					{ id: 5, title: 'Slide 3', imageUrl: 'https://p6-novel.byteimg.com/origin/novel-static/1ae29ac0a71a752bab51d090b942c3c4' }
				  ],
				   
				  isSticky: false,
				  isLogged: false,


				 user:{
					 userId: '',
					 username: '',
					 avatar: '',
				 },


				 novel: [{
					  novelId: '',
					  authorId: '',
					 categoryId: '',
					 coverImage: '',
					 title: '',
					 authorName: '',
					 categoryName: '',
				 }],
				 selectneirou: '',
				};
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);
			this.selectlist();
			this.iflogin();
		},
		methods: {
			handleScroll() {
				const scrollHeight = window.scrollY || document.documentElement.scrollTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;
			},
			selectlist(){
				axios.post('/other/novel/selectlist',this.novel[0]).then(res=>{

					this.novel = res.data.news;


				}).catch(err=>{
					console.log(err);
				});
			},
			Jump(novelId){
				window.location.href = "novel.html#"+novelId;

			},
			iflogin(){
				axios.get('/user/iflogin').then(res=>{

					if(res.data != ""){
					 	this.user.userId = res.data;
						axios.get('/user/getUser?userId='+this.user.userId).then(res=>{
							this.user = res.data;
						});
						this.isLogged =  true;
					}

				});

			},
			// 退出登录
			logout(){
				axios.post('/user/logout').then(res=>{
					this.isLogged = false;
					this.iflogin();
					window.location.href = "index.html";

				});

			},
			geren(){
				window.location.href = "user.html"
			},
			// 搜索
			select(){
				axios.get('/other/select/select?selectneirou='+this.selectneirou).then(res=>{
					if(res.data == "ok"){
						window.location.href = "select.html"
					}

				});

			}
		}
		 
		 
		 
	})
	 
	</script>
</html>
